<script setup lang="ts">
	import {ref,nextTick, onMounted} from 'vue';
	import type { roomItem } from '@/types';
	const props=defineProps<{
		roomList:roomItem[]
	}>()
	const show = ref(null)
	const richText = ref(null)
	// const roomLists = ref<roomItem[]>(props.roomList)
	// 模拟房型数据
	// const roomList = ref([{
	// 		imgUrl: 'https://example.com/room1.jpg', // 实际替换为真实图片地址
	// 		name: '1 King Bed',
	// 		desc: '柏悦客房',
	// 		size: '50㎡',
	// 		bedType: '大床',
	// 		price: '¥1400',
	// 		tags: ['含早餐', '专享价/会员价', '大床', '双床'],
	// 		isExpanded: true, // 初始是否展开
	// 		isExpanding: false, // 是否正在展开动画中
	// 		expandHeight: 0, // 展开高度
	// 		priceItems: [{
	// 				label: '无早 大床',
	// 				notice: '| 不可取消',
	// 				price: '¥1400',
	// 				memberRate: 'Member Rate',
	// 			},
	// 			{
	// 				label: '无早 大床',
	// 				notice: '| 不可取消',
	// 				price: '¥1429',
	// 				memberRate: '1 King Bed',
	// 			},
	// 			{
	// 				label: '早餐 大床',
	// 				notice: '| 不可取消',
	// 				price: '¥1658',
	// 				memberRate: 'Member Bed And Breakfast',
	// 			},
	// 		],
	// 		morePrice: 1,
	// 	},
	// ]);
	const handleRoomToggle = async (roomList,roomIndex) => {
		const currentRoom = roomList[roomIndex];
		currentRoom.isExpanded = !currentRoom.isExpanded;
		if (currentRoom.isExpanded) {
			currentRoom.isExpanding = true;
			await nextTick(); 
			currentRoom.expandHeight = 300;
			await nextTick(); 
			currentRoom.isExpanding = false;
		} else {
			currentRoom.expandHeight = 0;
		}
	};

	const handleMorePrice = (room,roomIndex) => {
		uni.showToast({
			title: '加载更多价格中...',
			icon: 'none',
		});
		room.priceItems+=room.priceItems
	};
	
	const showToast  =(item:any)=>{
		console.log(item)
		if(!item.cancelPolicies || item.cancelPolicies.length<1){
			return;
		}
		let policyContent = '';
		item.cancelPolicies.forEach(policy => {
			policyContent += `${policy}\n\n`;
		});
		uni.showModal({
			title: '取消政策',
			content: policyContent,
			showCancel: false
		});
	}
	const emit = defineEmits(['book'])
	const book  = (room:any,priceItem:any)=>{
		emit('book',{room,priceItem})
	}
	
	const roomInfo = (info:any)=>{
		richText.value=info
		show?.value.open('center')
		// uni.showModal({
			
		// })
	}
</script>


<template>
	<view class="room-list-container">
		<!-- 房型项循环 -->
		<view v-for="(room, roomIndex) in roomList" :key="roomIndex" class="room-item">
			<!-- 房型头部（可点击展开/收起） -->
			<view class="room-header" @click="handleRoomToggle(roomList,roomIndex)">
				<image class="room-img" src="/static/images/200751ffff52b0369935d9310117e774.jpg" mode="aspectFill">
				</image>
				<view class="room-info">
					<text class="room-name">{{ room.name }}</text>
					<text class="room-desc" v-html="room.desc "></text>
				 <!-- <view class="room-size"><text>{{ room.bedType }}</text> </view> -->
				 	<view class="room-unline" @click.stop="roomInfo(room.roomInfo)"><text>房间信息</text></view>
					<view class="room-price"> <text class="price">￥{{ room.price }}/晚</text> <text class="icon-xiangxiajiantou"></text>
					</view>
				</view>
			</view>
			<view v-show="room.isExpanded" class="price-list" 
				:class="{ 'expand-enter': room.isExpanding }">
				<view class="tag-area">
					<text v-for="(tag, tagIndex) in room.tags.slice(-5)" :key="tagIndex" class="tag">{{ tag }}</text>
				</view>
				<view v-for="(priceItem, priceIndex) in room.priceItems" :key="priceIndex" class="price-item">
					<view class="price-desc">
						<view class="price-label">
							<view>{{ priceItem.label }} 
							| <text v-if="priceItem.notice === '不可退改'" class="price-notice price-notice-red" @click="showToast(priceItem)">{{ priceItem.notice }}</text>
							<text v-else class="price-notice" @click="showToast(priceItem)">{{ priceItem.notice }}<text class="icon-jiantou2"></text></text>
						</view>
							<text class="item-price">{{ priceItem.price }}</text>
						</view>
						<view class="price-label">
							<view class="des">{{priceItem.memberRate}}</view>
							<view class="price-btns">
							<button class="book-btn" @click="book(room,priceItem)">预订</button>
							<!-- <button class="guarantee-btn">担保</button> -->
						</view>
						</view>
					</view>
				</view>

				<!-- <view v-if="room.morePrice && room.isExpanded" class="more-price" @click="handleMorePrice(room,roomIndex)">
					<button class="more-price-btn">查看剩余{{ room.morePrice }}个价格</button>
				</view> -->
			</view>
		</view>
	</view>
	 <uni-popup ref="show"  type="center">
		 <view class="custom-toast">
			 <view class="custom-toast-title">房间信息</view>
		 	<view v-html="richText"></view>
		 </view>
	      
	    </uni-popup>
</template>


<style scoped lang="scss"> 
.custom-toast{
	background-color: #fff;
	  max-height: 80vh;
	  padding: 20px;
	  border-radius: 10px;
	  margin: 32rpx;
	  overflow-y: scroll;
	  .custom-toast-title{
		  text-align: center;
		  font-size: 32rpx;
		  color: #333;
		  padding-bottom:20rpx ;
		  font-weight: bold;
	  }
}
	.room-list-container {
		background-color: #fff;
	}

	.room-item {
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.room-header {
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
		cursor: pointer;
		border-bottom: 1rpx solid #eee;
	}

	.room-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.room-info {
		flex: 1;
	}
	.room-unline{
		color: #007aff;
		text-decoration: none;
		font-size: 24rpx;
	}

	.room-name {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 5rpx;
		display: block;
	}

	.room-desc {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 5rpx;
		display: block;
	}

	.room-size {
		font-size: 22rpx;
		color: #999;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.room-price {
		text-align: right;
	}

	.price {
		font-size: 28rpx;
		color: #ff6600;
		margin-right: 10rpx;
	}

	.arrow-icon {
		width: 20rpx;
		height: 20rpx;
	}

	.tag-area {
		padding: 20rpx 10rpx 0;
	}

	.tag {
		display: inline-block;
		padding: 5rpx 15rpx;
		margin-right: 10rpx;
		margin-bottom: 20rpx;
		background-color: #e6f2ff;
		color: #007aff;
		font-size: 22rpx;
		border-radius: 5rpx;
	}

	.price-list {
		overflow: hidden;
		transition: height 0.3s ease-in-out;
	}

	.expand-enter {
		height: 0 !important;
	}

	.price-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.price-desc {
		flex: 1;
	}

	.price-label {
		font-size: 26rpx;
		margin-bottom: 5rpx;
		display: flex;
		justify-content: space-between;
	}

	.price-notice {
		font-size: 24rpx;
		color: #007aff;
		.icon-jiantou2{
			font-size: 24rpx;
		}
	}
	
	.price-notice-red {
		color: #ff0000;
	}

	.item-price {
		font-size: 28rpx;
		color: #ff6600;
		margin-right: 20rpx;
	}

	.price-btns {
		display: flex;
	}

	.book-btn,
	.guarantee-btn {
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 20rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.book-btn {
		background-color: #007aff;
		color: #fff;
	}

	.guarantee-btn {
		border: 1rpx solid #ccc;
		background-color: #fff;
	}

	.more-price {
		text-align: center;
		padding: 20rpx;
		color: #007aff;
		font-size: 24rpx;
		cursor: pointer;
		.more-price-btn{
			font-size: 24rpx;
			cursor: pointer;
			color: #007aff;
			width: 260rpx;
			background-color: #fff;
			border:  1px solid #007aff;
			border-radius: 40rpx;
			letter-spacing: 1px;
		}
		
	}
</style>